<template>
	<view class="goshop-withdraw-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-withdraw-wrap">
			<view class="goshop-withdraw-money-label">
				{{withdrawText}}
			<u-radio-group
			    class="row-x"
			    v-model="channel"
			    placement="row"
			    @change="groupChange"
			  >
			    <u-radio
			      :customStyle="{marginLeft: '8px'}"
			      v-for="(item, index) in radiolist"
			      :key="index"
			      :label="item.name"
			      :name="item.name"
			    >
			    </u-radio>
			  </u-radio-group>
			</view>
			<view v-if="form.channel === 2">
				<view class="goshop-withdraw-list">
					<view>{{nameText}}:</view>
					<u--input
					    :placeholder="zfbnameText"
					    border="none"
					    v-model="form.zfbName"
					  ></u--input>
				</view>
				<view class="goshop-withdraw-list">
					<view>{{accountText}}:</view>
					<u--input
					    :placeholder="zfbaccountText"
					    border="none"
					    v-model="form.zfbAccount"
					  ></u--input>
				</view>
			</view>
			<view v-else>
				<view class="goshop-withdraw-list">
					<view>{{accountText}}:</view>
					<u--input
					    :placeholder="paypalaccountText"
					    border="none"
					    v-model="form.payPalAccount"
					  ></u--input>
				</view>
			</view>
			<view class="goshop-withdraw-money-label">{{amountText}}</view>
			<view class="goshop-recharge-money-withdraw">
				<view class="goshop-recharge-money-withdraw-left">{{moneyText}}</view>
				<view class="goshop-recharge-money-withdraw-right">
					<u--input
					    :placeholder="fillamountText"
					    border="none"
						fontSize="20"
					    v-model="form.money"
					  ></u--input>
				</view>
			</view>
			<view class="goshop-recharge-money-rate">
				<view class="goshop-recharge-money-rate-left">
					<view class="base-font-size text-color-three">{{balanceText}}<text class="text-color-primary">{{memberInfo.money?memberInfo.money:'0.00'}}</text>{{moneyunitText}}</view>
					<view class="base-font-size text-color-three">{{handlingfeeText}} 10%</view>
					<view class="base-font-size text-color-three">{{receivedText}}<text class="text-color-primary">0.00</text>{{moneyunitText}}</view>
				</view>
				<view class="goshop-recharge-money-rate-right">
					<view class="text-color-three">|</view>
					<view class="u-m-l-10 base-font-size text-color-primary font-bold">{{allText}}</view>
				</view>
			</view>
			<view class="goshop-withdraw-submit">
				<u-button type="error" @click="onWithdraw" :text="immediatelyText"></u-button>
			</view>
			<view class="goshop-recharge-money-desc">
				<view class="">{{illustrateText}}:</view>
				<view class="base-font-size text-color-three">{{desc1Text}}</view>
				<view class="base-font-size text-color-three">{{desc2Text}}</view>
				<view class="base-font-size text-color-three">{{desc3Text}}</view>
				<view class="base-font-size text-color-three">{{desc4Text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {walletWithdraw} from '@/common/http.api.js'
	import { mapState, mapActions, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				channel:'',
				radiolist: [
					{
						name: '',
						type:2,
						disabled: false
					},
					{
					  name: '',
					  type:3,
					  disabled: false
					}
				  ],
				form:{
					channel:'',
					zfbName:'',
					zfbAccount:'',
					payPalAccount:'',
					money:'',
				},
				withdrawText:'',
				nameText:'',
				accountText:'',
				zfbnameText:'',
				zfbaccountText:'',
				paypalaccountText:'',
				amountText:'',
				fillamountText:'',
				balanceText:'',
				handlingfeeText:'',
				receivedText:'',
				allText:'',
				immediatelyText:'',
				illustrateText:'',
				desc1Text:'',
				desc2Text:'',
				desc3Text:'',
				desc4Text:'',
				moneyText:'',
				moneyunitText:'',
				successText:'',
			};
		},
		async onShow(){
		   this.isLogin ? await this.getMemberInfo() : this.resetMemberInfo();
		   this.refresh();
		},
		computed: {
			...mapGetters(['memberInfo'])
		},
		methods:{
			...mapActions(['getMemberInfo','resetMemberInfo']),
			refresh(){
				this.channel = this.$t('common.paypalpay.text');
				this.form.channel = 3;
				this.radiolist[0].name = this.$t('common.zfbpay.text');
				this.radiolist[1].name = this.$t('common.paypalpay.text');
				this.moneyText = this.$t('common.money.text');
				this.moneyunitText = this.$t('common.moneyunit.text');
				this.withdrawText = this.$t('withdraw.withdraw.text');
				this.nameText = this.$t('withdraw.name.text');
				this.accountText = this.$t('withdraw.account.text');
				this.zfbnameText = this.$t('withdraw.zfbname.text');
				this.zfbaccountText = this.$t('withdraw.zfbaccount.text');
				this.paypalaccountText = this.$t('withdraw.paypalaccount.text');
				this.amountText = this.$t('withdraw.amount.text');
				this.fillamountText = this.$t('withdraw.fillamount.text');
				
				this.balanceText = this.$t('withdraw.balance.text');
				this.handlingfeeText = this.$t('withdraw.handlingfee.text');
				this.receivedText = this.$t('withdraw.received.text');
				this.allText = this.$t('withdraw.all.text');
				
				this.immediatelyText = this.$t('withdraw.immediately.text');
				this.illustrateText = this.$t('withdraw.illustrate.text');
				this.desc1Text = this.$t('withdraw.desc1.text');
				this.desc2Text = this.$t('withdraw.desc2.text');
				this.desc3Text = this.$t('withdraw.desc3.text');
				this.desc4Text = this.$t('withdraw.desc4.text');
				this.successText = this.$t('withdraw.success.text');
			},
			 groupChange(n) {
				debugger
				for (var i = 0; i < this.radiolist.length; i++) {
					let item = this.radiolist[i];
					if(item.name === n){
						this.form.channel = item.type;
					}
				}
			},
			onWithdraw(){
				let that = this;
				console.info(that.form);
				debugger
				walletWithdraw(that.form).then(res => {
					if (res.code === 0) {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.successText,
							type: 'success',
							complete() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.goshop-withdraw-container{
	.goshop-withdraw-wrap{
		padding: 20rpx;
		.goshop-withdraw-money-label{
			padding: 20rpx 0;
			display: flex;
		}
		.goshop-withdraw-list{
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid $goshop-text-color-four;
		}
		.goshop-recharge-money-withdraw{
			display: flex;
			padding: 20rpx 0;
			font-size: 20px;
			.goshop-recharge-money-withdraw-left{
				
			}
			.goshop-recharge-money-withdraw-right{
				font-size: 20px;
				align-items: center;
			}
		}
		.goshop-recharge-money-rate{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			justify-content: space-between;
			.goshop-recharge-money-rate-left{
				
			}
			.goshop-recharge-money-rate-right{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.goshop-recharge-money-desc{
			margin-top: 20rpx;
		}
	}
	.goshop-withdraw-submit{
		padding: 20rpx;
	}
}
</style>
